class Vue {
    constructor(options) {
        this.$options = options
        this._data = options.data
        observe(options.data, this._update)
        this._update()
    }
    _update(options) {
        this.$options.render()
    }
}

function defineReactive(obj, key, val, sub) {
    const dep = new Dep(sub)
    Object.defineProperty(obj, key, {
        writable: true,
        enumerable: true,
        get: function getter() {
            if (Dep.target) {
                dep.add(Dep.target)
            }
            return val
        },
        set: function setter(newVal) {
            if (val === newVal) {
                return
            }
            val = newVal
            dep.notify()
        }
    })
}

function observe(value, sub) {
    if (!value || typeof value !== 'object') {
        return
    }
    new Observe(value, sub)
}

class Observe {
    constructor(value, sub) {
        if (Array.isArray(value)) {
            this.observeArry(value, sub)
        } else {
            this.walk(obj, sub)
        }
    }
    //defineproperty,每个对象
    walk(obj, sub) {
        const keys = Object.keys(obj)
        for (let i = 0, len = keys; i < len; i++) {
            defineReactive(obj, keys[i], obj[keys[i]], sub)
        }
    }
    observeArry(items) {
        for (let i = 0; i < items.length; i++) {

        }
    }
}

class Dep {
    constructor() {
        this.subs = []
    }

    addSub(sub) {
        this.subs.push(sub)
    }
    removeSub(sub) {
        this.subs = this.subs.filter(item => item !== sub)//vue中采用splice不知道是否有特殊的意义
    }
    notify() {
        const subs = this.subs.slice()
        for (let i = 0, l = subs.length; i < l; i++) {
            subs[i].update()
        }
    }
}
Dep.target = null
class Wacher {
    constructor() {

    }

    update() {

    }
}